<template>
	<div class="ele-body">
		<a-card :bordered="false" title="添加货品">
			<a-form :label-col="{ md: { span: 9 }, sm: { span: 4 }, xs: { span: 24 } }" :wrapper-col="{ md: { span: 15 }, sm: { span: 20 }, xs: { span: 24 } }">
				<a-row :gutter="24">
					<a-col :md="6" :sm="12" :xs="12">
						<a-form-item label="条形码" v-bind="validateInfos.bar_code">
							<a-input allow-clear placeholder="请输入" autocomplete="off" v-model:value="form.bar_code" />
						</a-form-item>
					</a-col>
					<a-col :md="6" :sm="12" :xs="12">
						<a-form-item label="货品种类" v-bind="validateInfos.subclass_code">
							<a-select placeholder="请选择" :options="goods_category_options" v-model:value="form.subclass_code" @change="goods_category_change" />
						</a-form-item>
					</a-col>
					<a-col :md="6" :sm="12" :xs="12">
						<a-form-item label="货品名称"><a-input allow-clear placeholder="请输入" autocomplete="off" v-model:value="form.name" /></a-form-item>
					</a-col>
					<a-col :md="6" :sm="12" :xs="12">
						<a-form-item label="货品成色" v-bind="validateInfos.quality_code">
							<a-select placeholder="请选择" :options="quality_options" v-model:value="form.quality_code" @change="quality_change" />
						</a-form-item>
					</a-col>
					<a-col :md="6" :sm="12" :xs="12">
						<a-form-item label="货品款式" v-bind="validateInfos.style_code">
							<a-select placeholder="请选择" :options="style_options" v-model:value="form.style_code" @change="style_change" />
						</a-form-item>
					</a-col>
					<a-col :md="6" :sm="12" :xs="12">
						<a-form-item label="二手款式"><a-input allow-clear placeholder="请输入" autocomplete="off" v-model:value="form.sub_style" /></a-form-item>
					</a-col>
					<a-col :md="6" :sm="12" :xs="12">
						<a-form-item label="净金重(g)" v-bind="validateInfos.gold_weight">
							<a-input allow-clear type="number" placeholder="请输入" autocomplete="off" v-model:value="form.gold_weight" />
						</a-form-item>
					</a-col>
					<a-col :md="6" :sm="12" :xs="12">
						<a-form-item label="总件重(g)" v-bind="validateInfos.piece_weight">
							<a-input allow-clear type="number" placeholder="请输入" autocomplete="off" v-model:value="form.piece_weight" />
						</a-form-item>
					</a-col>
					<a-col :md="6" :sm="12" :xs="12">
						<a-form-item label="内部款号"><a-input allow-clear placeholder="请输入" autocomplete="off" v-model:value="form.style_model" /></a-form-item>
					</a-col>
					<a-col :md="6" :sm="12" :xs="12">
						<a-form-item label="手寸"><a-input allow-clear placeholder="请输入" autocomplete="off" v-model:value="form.hand_inch" /></a-form-item>
					</a-col>
					<a-col :md="6" :sm="12" :xs="12">
						<a-form-item label="长度(cm)"><a-input allow-clear type="number" placeholder="请输入" autocomplete="off" v-model:value="form.length" /></a-form-item>
					</a-col>
					<a-col :md="6" :sm="12" :xs="12">
						<a-form-item label="内径(mm)">
							<a-input allow-clear type="number" placeholder="请输入" autocomplete="off" v-model:value="form.inner_diameter" />
						</a-form-item>
					</a-col>
					<a-col :md="6" :sm="12" :xs="12">
						<a-form-item label="尺寸(mm)"><a-input allow-clear type="number" placeholder="请输入" autocomplete="off" v-model:value="form.size" /></a-form-item>
					</a-col>
					<a-col :md="6" :sm="12" :xs="12">
						<a-form-item label="主石零售价" v-bind="validateInfos.main_stone_retail_price">
							<a-input allow-clear type="number" placeholder="请输入" autocomplete="off" v-model:value="form.main_stone_retail_price" />
						</a-form-item>
					</a-col>
					<a-col :md="6" :sm="12" :xs="12">
						<a-form-item label="标签价" v-bind="validateInfos.sticker_price">
							<a-input allow-clear type="number" placeholder="请输入" autocomplete="off" v-model:value="form.sticker_price" />
						</a-form-item>
					</a-col>
					<a-col :md="6" :sm="12" :xs="12">
						<a-form-item label="工费零售方式" v-bind="validateInfos.retail_labour_type">
							<a-select placeholder="请选择" :options="retail_labour_options" v-model:value="form.retail_labour_type" @change="retail_labour_change" />
						</a-form-item>
					</a-col>
					<a-col :md="6" :sm="12" :xs="12">
						<a-form-item label="零售方式" v-bind="validateInfos.retail_type">
							<a-select placeholder="请选择" :options="retail_labour_options" v-model:value="form.retail_type" @change="retail_labour_change2" />
						</a-form-item>
					</a-col>
					<a-col :md="6" :sm="12" :xs="12">
						<a-form-item label="零售工费"><a-input allow-clear placeholder="请输入" autocomplete="off" v-model:value="form.retail_labour_expenses" /></a-form-item>
					</a-col>
					<a-col :md="6" :sm="12" :xs="12">
						<a-form-item label="采购金价">
							<a-input allow-clear type="number" placeholder="请输入" autocomplete="off" v-model:value="form.purchase_gold_price" />
						</a-form-item>
					</a-col>
					<a-col :md="6" :sm="12" :xs="12">
						<a-form-item label="采购工费">
							<a-input allow-clear type="number" placeholder="请输入" autocomplete="off" v-model:value="form.purchase_labour_expenses" />
						</a-form-item>
					</a-col>
					<template v-if="searchExpand">
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="采购总额">
								<a-input allow-clear type="number" placeholder="请输入" autocomplete="off" disabled v-model:value="form.purchase_labour_amount" />
							</a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="金料金价">
								<a-input allow-clear type="number" placeholder="请输入" autocomplete="off" v-model:value="form.gold_material_price" />
							</a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="损耗（0-1)"><a-input allow-clear type="number" placeholder="请输入" autocomplete="off" v-model:value="form.loss" /></a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="基础工费">
								<a-input allow-clear type="number" placeholder="请输入" autocomplete="off" v-model:value="form.basic_labour" />
							</a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="特殊工费">
								<a-input allow-clear type="number" placeholder="请输入" autocomplete="off" v-model:value="form.special_labour" />
							</a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="其他费用"><a-input allow-clear type="number" placeholder="请输入" autocomplete="off" v-model:value="form.other_fee" /></a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="证书费"><a-input allow-clear type="number" placeholder="请输入" autocomplete="off" v-model:value="form.cert_fee" /></a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="品牌附加费">
								<a-input allow-clear type="number" placeholder="请输入" autocomplete="off" v-model:value="form.brand_extra_fee" />
							</a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="成本"><a-input allow-clear type="number" placeholder="请输入" autocomplete="off" disabled v-model:value="form.cost" /></a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="分销成本"><a-input allow-clear placeholder="请输入" autocomplete="off" v-model:value="form.retail_cost" /></a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="数量" v-bind="validateInfos.num">
								<a-input allow-clear placeholder="请输入" autocomplete="off" disabled v-model:value="form.num" />
							</a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="证书1类型"><a-input allow-clear placeholder="请输入" autocomplete="off" v-model:value="form.cert_first_cate" /></a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="证书1编码"><a-input allow-clear placeholder="请输入" autocomplete="off" v-model:value="form.cert_first_code" /></a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="证书2类型"><a-input allow-clear placeholder="请输入" autocomplete="off" v-model:value="form.cert_second_cate" /></a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="证书2编码"><a-input allow-clear placeholder="请输入" autocomplete="off" v-model:value="form.cert_second_code" /></a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="经营品牌"><a-input allow-clear placeholder="请输入" autocomplete="off" v-model:value="form.management_brand" /></a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="品牌"><a-input allow-clear placeholder="请输入" autocomplete="off" v-model:value="form.brand" /></a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="贵金属颜色"><a-input allow-clear placeholder="请输入" autocomplete="off" v-model:value="form.color" /></a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="供应商名称" v-bind="validateInfos.supplier_code">
								<a-select placeholder="请选择" :options="supplier_options" v-model:value="form.supplier_code" @change="supplier_change" />
							</a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="供应商条码"><a-input allow-clear placeholder="请输入" autocomplete="off" v-model:value="form.supplier_bar" /></a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="供应商款号">
								<a-select placeholder="请选择" :options="supplier_style_options" v-model:value="form.supplier_style_code" @change="supplier_style_change" />
							</a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="系列名称" v-bind="validateInfos.series_code">
								<a-select placeholder="请选择" :options="series_options" v-model:value="form.series_code" @change="series_change" />
							</a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="系列款式" v-bind="validateInfos.series_style_code">
								<a-select placeholder="请选择" :options="series_style_options" v-model:value="form.series_style_code" @change="series_style_change" />
							</a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="监管码"><a-input allow-clear placeholder="请输入" autocomplete="off" v-model:value="form.supervision_code" /></a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="旧条码号"><a-input allow-clear placeholder="请输入" autocomplete="off" v-model:value="form.old_bar_code" /></a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="财务分类">
								<a-select placeholder="请选择" :options="finance_options" v-model:value="form.finance" @change="finance_change" />
							</a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="赠品类型">
								<a-select placeholder="请选择" :options="present_cate_options" v-model:value="form.present_cate" @change="present_cate_change" />
							</a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="工艺类型">
								<a-select placeholder="请选择" :options="craft_cate_options" v-model:value="form.craft_cate" @change="craft_cate_change" />
							</a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="价格类型">
								<a-select placeholder="请选择" :options="price_cate_options" v-model:value="form.price_cate" @change="price_cate_change" />
							</a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="宝石类别">
								<a-select placeholder="请选择" :options="gem_category_options" v-model:value="form.gem_category_code" @change="gem_category_change" />
							</a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="备注1"><a-input allow-clear placeholder="请输入" autocomplete="off" v-model:value="form.note_first" /></a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="备注2"><a-input allow-clear placeholder="请输入" autocomplete="off" v-model:value="form.note_second" /></a-form-item>
						</a-col>
						<a-col :md="6" :sm="12" :xs="12">
							<a-form-item label="上传图片">
								<a-upload
									name="attachment"
									v-model:file-list="images"
									:action="uploadUrl"
									:limit="1"
									list-type="picture-card"
									@change="uploadHandler"
									:show-upload-list="false"
								>
									<img v-if="imageUrl" :src="imageUrl" style="width: 100%" alt="example" />
									<div v-else>
										<loading-outlined v-if="loading" />
										<plus-outlined v-else />
										<div class="ant-upload-text">上传图片</div>
									</div>
								</a-upload>
							</a-form-item>
						</a-col>
					</template>
					<a-col :md="6" :sm="12" :xs="12" :offset="18">
						<a-form-item label="" class="text-right">
							<a @click="toggleExpand">
								<span v-if="searchExpand">
									收起
									<up-outlined class="ele-text-small" />
								</span>
								<span v-else>
									更多信息
									<down-outlined class="ele-text-small" />
								</span>
							</a>
						</a-form-item>
					</a-col>
				</a-row>
			</a-form>
			<div>
				<div class="fs-16 fw-bolder margin-bottom-15">主石信息</div>
				<div>
					<vxe-table
						border
						show-overflow
						:column-config="{ resizable: true }"
						:loading="table1.loading"
						:data="table1.tableData"
						:edit-config="{ trigger: 'click', mode: 'cell', showIcon: false }"
					>
						>
						<vxe-column type="seq" title="NO" width="60" fixed="left" />
						<vxe-column field="name" title="石料名称" width="150" :edit-render="{}">
							<template #edit="{ row }">
								<vxe-input v-model="row.name" type="text" placeholder="请输入" />
							</template>
						</vxe-column>
						<vxe-column field="gem_category_code" title="宝石类别" width="150" :edit-render="{}">
							<template #default="{ row }">
								<span>{{ productSpec(gem_category_options, row.gem_category_code) }}</span>
							</template>
							<template #edit="{ row }">
								<vxe-select v-model="row.gem_category_code" placeholder="请选择" transfer>
									<vxe-option v-for="item in gem_category_options" :key="item.value" :value="item.value" :label="item.label" />
								</vxe-select>
							</template>
						</vxe-column>
						<vxe-column field="price" title="单价" width="150" :edit-render="{}">
							<template #edit="{ row }">
								<vxe-input v-model="row.price" type="number" placeholder="请输入" />
							</template>
						</vxe-column>
						<vxe-column field="num" title="数量" width="150" :edit-render="{}">
							<template #edit="{ row }">
								<vxe-input v-model="row.num" type="number" placeholder="请输入" disabled />
							</template>
						</vxe-column>
						<vxe-column field="amount" title="总价" width="150">
							<!-- <template #edit="{ row }">
                <vxe-input
                  v-model="row.amount"
                  type="text"
                  placeholder="请输入"
                />
              </template> -->
							<template #default="{ row }">
								<span>{{ countAmount(row) }}</span>
							</template>
						</vxe-column>
						<vxe-column field="weight" title="重量" width="150" :edit-render="{}">
							<template #edit="{ row }">
								<vxe-input v-model="row.weight" type="number" placeholder="请输入" />
							</template>
						</vxe-column>
						<vxe-column field="stone_code" title="石号" width="150" :edit-render="{}">
							<template #default="{ row }">
								<span>{{ productSpec(stone_options, row.stone_code) }}</span>
							</template>
							<template #edit="{ row }">
								<vxe-select v-model="row.stone_code" placeholder="请选择" transfer>
									<vxe-option v-for="item in stone_options" :key="item.value" :value="item.value" :label="item.label" />
								</vxe-select>
							</template>
						</vxe-column>
						<vxe-column field="form" title="形状" width="150" :edit-render="{}">
							<template #default="{ row }">
								<span>{{ productSpec(form_options, row.form) }}</span>
							</template>
							<template #edit="{ row }">
								<vxe-select v-model="row.form" placeholder="请选择" transfer>
									<vxe-option v-for="item in form_options" :key="item.value" :value="item.value" :label="item.label" />
								</vxe-select>
							</template>
						</vxe-column>
						<vxe-column field="color" title="颜色" width="150" :edit-render="{}">
							<template #default="{ row }">
								<span>{{ productSpec(color_options, row.color) }}</span>
							</template>
							<template #edit="{ row }">
								<vxe-select v-model="row.color" placeholder="请选择" transfer>
									<vxe-option v-for="item in color_options" :key="item.value" :value="item.value" :label="item.label" />
								</vxe-select>
							</template>
						</vxe-column>
						<vxe-column field="neatness" title="净度" width="150" :edit-render="{}">
							<template #default="{ row }">
								<span>{{ productSpec(neatness_options, row.neatness) }}</span>
							</template>
							<template #edit="{ row }">
								<vxe-select v-model="row.neatness" placeholder="请选择" transfer>
									<vxe-option v-for="item in neatness_options" :key="item.value" :value="item.value" :label="item.label" />
								</vxe-select>
							</template>
						</vxe-column>
						<vxe-column field="cut" title="切工" width="150" :edit-render="{}">
							<template #default="{ row }">
								<span>{{ productSpec(cut_options, row.cut) }}</span>
							</template>
							<template #edit="{ row }">
								<vxe-select v-model="row.cut" placeholder="请选择" transfer>
									<vxe-option v-for="item in cut_options" :key="item.value" :value="item.value" :label="item.label" />
								</vxe-select>
							</template>
						</vxe-column>
						<vxe-column field="buffing" title="抛光" width="150" :edit-render="{}">
							<template #default="{ row }">
								<span>{{ productSpec(buffing_options, row.buffing) }}</span>
							</template>
							<template #edit="{ row }">
								<vxe-select v-model="row.buffing" placeholder="请选择" transfer>
									<vxe-option v-for="item in buffing_options" :key="item.value" :value="item.value" :label="item.label" />
								</vxe-select>
							</template>
						</vxe-column>
						<vxe-column field="symmetric" title="对称" width="150" :edit-render="{}">
							<template #default="{ row }">
								<span>{{ productSpec(symmetric_options, row.symmetric) }}</span>
							</template>
							<template #edit="{ row }">
								<vxe-select v-model="row.symmetric" placeholder="请选择" transfer>
									<vxe-option v-for="item in symmetric_options" :key="item.value" :value="item.value" :label="item.label" />
								</vxe-select>
							</template>
						</vxe-column>
						<vxe-column field="fluorescence" title="荧光" width="150" :edit-render="{}">
							<template #default="{ row }">
								<span>{{ productSpec(fluorescence_options, row.fluorescence) }}</span>
							</template>
							<template #edit="{ row }">
								<vxe-select v-model="row.fluorescence" placeholder="请选择" transfer>
									<vxe-option v-for="item in fluorescence_options" :key="item.value" :value="item.value" :label="item.label" />
								</vxe-select>
							</template>
						</vxe-column>
						<vxe-column field="fluorescence_color" title="荧光颜色" width="150" :edit-render="{}">
							<template #edit="{ row }">
								<vxe-input v-model="row.fluorescence_color" type="text" placeholder="请输入" />
							</template>
						</vxe-column>
						<vxe-column field="inlay_fee" title="镶嵌工费" width="150" :edit-render="{}">
							<template #edit="{ row }">
								<vxe-input v-model="row.inlay_fee" type="number" placeholder="请输入" />
							</template>
						</vxe-column>
						<vxe-column field="cert_fee" title="证书费" width="150" :edit-render="{}">
							<template #edit="{ row }">
								<vxe-input v-model="row.cert_fee" type="number" placeholder="请输入" />
							</template>
						</vxe-column>
						<vxe-column field="cert_cate" title="证书类型" width="150" :edit-render="{}">
							<template #edit="{ row }">
								<vxe-input v-model="row.cert_cate" type="text" placeholder="请输入" />
							</template>
						</vxe-column>
						<vxe-column field="cert_code" title="证书编号" width="150" :edit-render="{}">
							<template #edit="{ row }">
								<vxe-input v-model="row.cert_code" type="text" placeholder="请输入" />
							</template>
						</vxe-column>
					</vxe-table>
				</div>
			</div>
			<div>
				<div class="fs-16 fw-bolder margin-y-15">副石信息</div>
				<div>
					<vxe-table
						border
						show-overflow
						ref="xTable"
						:column-config="{ resizable: true }"
						:loading="table2.loading"
						:data="table2.tableData"
						:edit-config="{ trigger: 'click', mode: 'cell', showIcon: false }"
					>
						>
						<vxe-column type="seq" title="NO" width="60" fixed="left" />
						<vxe-column field="name" title="石料名称" width="150" :edit-render="{}">
							<template #edit="{ row }">
								<vxe-input v-model="row.name" type="text" placeholder="请输入" />
							</template>
						</vxe-column>
						<vxe-column field="gem_category_code" title="宝石类别" width="150" :edit-render="{}">
							<template #default="{ row }">
								<span>{{ productSpec(gem_category_options, row.gem_category_code) }}</span>
							</template>
							<template #edit="{ row }">
								<vxe-select v-model="row.gem_category_code" placeholder="请选择" transfer>
									<vxe-option v-for="item in gem_category_options" :key="item.value" :value="item.value" :label="item.label" />
								</vxe-select>
							</template>
						</vxe-column>
						<vxe-column field="price" title="单价" width="150" :edit-render="{}">
							<template #edit="{ row }">
								<vxe-input v-model="row.price" type="text" placeholder="请输入" />
							</template>
						</vxe-column>
						<vxe-column field="num" title="数量" width="150" :edit-render="{}">
							<template #edit="{ row }">
								<vxe-input v-model="row.num" type="number" placeholder="请输入" />
							</template>
						</vxe-column>
						<vxe-column field="amount" title="总价" width="150">
							<!-- <template #edit="{ row }">
                <vxe-input
                  v-model="row.amount"
                  type="text"
                  placeholder="请输入"
                />
              </template> -->
							<template #default="{ row }">
								<span>{{ countAmount(row) }}</span>
							</template>
						</vxe-column>
						<vxe-column field="weight" title="重量" width="150" :edit-render="{}">
							<template #edit="{ row }">
								<vxe-input v-model="row.weight" type="number" placeholder="请输入" />
							</template>
						</vxe-column>
						<vxe-column field="stone_code" title="石号" width="150" :edit-render="{}">
							<template #default="{ row }">
								<span>{{ productSpec(stone_options, row.stone_code) }}</span>
							</template>
							<template #edit="{ row }">
								<vxe-select v-model="row.stone_code" placeholder="请选择" transfer>
									<vxe-option v-for="item in stone_options" :key="item.value" :value="item.value" :label="item.label" />
								</vxe-select>
							</template>
						</vxe-column>
						<vxe-column field="form" title="形状" width="150" :edit-render="{}">
							<template #default="{ row }">
								<span>{{ productSpec(form_options, row.form) }}</span>
							</template>
							<template #edit="{ row }">
								<vxe-select v-model="row.form" placeholder="请选择" transfer>
									<vxe-option v-for="item in form_options" :key="item.value" :value="item.value" :label="item.label" />
								</vxe-select>
							</template>
						</vxe-column>
						<vxe-column field="color" title="颜色" width="150" :edit-render="{}">
							<template #default="{ row }">
								<span>{{ productSpec(color_options, row.color) }}</span>
							</template>
							<template #edit="{ row }">
								<vxe-select v-model="row.color" placeholder="请选择" transfer>
									<vxe-option v-for="item in color_options" :key="item.value" :value="item.value" :label="item.label" />
								</vxe-select>
							</template>
						</vxe-column>
						<vxe-column field="neatness" title="净度" width="150" :edit-render="{}">
							<template #default="{ row }">
								<span>{{ productSpec(neatness_options, row.neatness) }}</span>
							</template>
							<template #edit="{ row }">
								<vxe-select v-model="row.neatness" placeholder="请选择" transfer>
									<vxe-option v-for="item in neatness_options" :key="item.value" :value="item.value" :label="item.label" />
								</vxe-select>
							</template>
						</vxe-column>
						<vxe-column field="cut" title="切工" width="150" :edit-render="{}">
							<template #default="{ row }">
								<span>{{ productSpec(cut_options, row.cut) }}</span>
							</template>
							<template #edit="{ row }">
								<vxe-select v-model="row.cut" placeholder="请选择" transfer>
									<vxe-option v-for="item in cut_options" :key="item.value" :value="item.value" :label="item.label" />
								</vxe-select>
							</template>
						</vxe-column>
						<vxe-column field="buffing" title="抛光" width="150" :edit-render="{}">
							<template #default="{ row }">
								<span>{{ productSpec(buffing_options, row.buffing) }}</span>
							</template>
							<template #edit="{ row }">
								<vxe-select v-model="row.buffing" placeholder="请选择" transfer>
									<vxe-option v-for="item in buffing_options" :key="item.value" :value="item.value" :label="item.label" />
								</vxe-select>
							</template>
						</vxe-column>
						<vxe-column field="symmetric" title="对称" width="150" :edit-render="{}">
							<template #default="{ row }">
								<span>{{ productSpec(symmetric_options, row.symmetric) }}</span>
							</template>
							<template #edit="{ row }">
								<vxe-select v-model="row.symmetric" placeholder="请选择" transfer>
									<vxe-option v-for="item in symmetric_options" :key="item.value" :value="item.value" :label="item.label" />
								</vxe-select>
							</template>
						</vxe-column>
						<vxe-column field="fluorescence" title="荧光" width="150" :edit-render="{}">
							<template #default="{ row }">
								<span>{{ productSpec(fluorescence_options, row.fluorescence) }}</span>
							</template>
							<template #edit="{ row }">
								<vxe-select v-model="row.fluorescence" placeholder="请选择" transfer>
									<vxe-option v-for="item in fluorescence_options" :key="item.value" :value="item.value" :label="item.label" />
								</vxe-select>
							</template>
						</vxe-column>
						<vxe-column field="fluorescence_color" title="荧光颜色" width="150" :edit-render="{}">
							<template #edit="{ row }">
								<vxe-input v-model="row.fluorescence_color" type="text" placeholder="请输入" />
							</template>
						</vxe-column>
						<vxe-column field="inlay_fee" title="镶嵌工费" width="150" :edit-render="{}">
							<template #edit="{ row }">
								<vxe-input v-model="row.inlay_fee" type="number" placeholder="请输入" />
							</template>
						</vxe-column>
						<vxe-column field="cert_fee" title="证书费" width="150" :edit-render="{}">
							<template #edit="{ row }">
								<vxe-input v-model="row.cert_fee" type="number" placeholder="请输入" />
							</template>
						</vxe-column>
						<vxe-column field="cert_cate" title="证书类型" width="150" :edit-render="{}">
							<template #edit="{ row }">
								<vxe-input v-model="row.cert_cate" type="text" placeholder="请输入" />
							</template>
						</vxe-column>
						<vxe-column field="cert_code" title="证书编号" width="150" :edit-render="{}">
							<template #edit="{ row }">
								<vxe-input v-model="row.cert_code" type="text" placeholder="请输入" />
							</template>
						</vxe-column>
					</vxe-table>
					<vxe-toolbar>
						<template #buttons>
							<vxe-button @click="insertEvent(-1)">新增</vxe-button>
							<!-- <vxe-button @click="getInsertEvent">获取新增</vxe-button> -->
						</template>
					</vxe-toolbar>
				</div>
			</div>
			<div>
				<div class="fs-16 fw-bolder margin-y-15">配件信息</div>
				<div>
					<vxe-table
						border
						show-overflow
						:column-config="{ resizable: true }"
						:loading="table3.loading"
						:data="table3.tableData"
						:edit-config="{ trigger: 'click', mode: 'cell', showIcon: false }"
					>
						<vxe-column field="fitting_name" title="配件名称" :edit-render="{}">
							<template #edit="{ row }">
								<vxe-input v-model="row.fitting_name" type="text" placeholder="请输入" />
							</template>
						</vxe-column>
						<vxe-column field="fitting_num" title="配件数量" :edit-render="{}">
							<template #edit="{ row }">
								<vxe-input v-model="row.fitting_num" type="number" placeholder="请输入" />
							</template>
						</vxe-column>
						<vxe-column field="fitting_weight" title="配件重量" :edit-render="{}">
							<template #edit="{ row }">
								<vxe-input v-model="row.fitting_weight" type="number" placeholder="请输入" />
							</template>
						</vxe-column>
						<vxe-column field="fitting_num_price" title="配件数单价（元/件）" :edit-render="{}">
							<template #edit="{ row }">
								<vxe-input v-model="row.fitting_num_price" type="number" placeholder="请输入" />
							</template>
						</vxe-column>
						<vxe-column field="fitting_weight_price" title="配件重单价（元/克）" :edit-render="{}">
							<template #edit="{ row }">
								<vxe-input v-model="row.fitting_weight_price" type="number" placeholder="请输入" />
							</template>
						</vxe-column>
						<vxe-column field="fitting_cost" title="配件成本价（元）" :edit-render="{}">
							<template #edit="{ row }">
								<vxe-input v-model="row.fitting_cost" type="number" placeholder="请输入" />
							</template>
						</vxe-column>
					</vxe-table>
				</div>
			</div>
		</a-card>
		<div style="width: 100%; height: 100px"></div>
		<!-- 底部工具栏 -->
		<div class="ele-bottom-tool">
			<div class="ele-bottom-tool-actions">
				<a-space size="large">
					<a-button type="primary" :loading="loading" @click="save()">保存</a-button>
					<a-button type="default" class="btn" :loading="loading">取消</a-button>
				</a-space>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, reactive, unref, onMounted, defineComponent, computed } from 'vue';
import { DownOutlined, UpOutlined, PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import { message, Modal, Form } from 'ant-design-vue';
import { uploadUrl } from '@/config/setting';
import {
	get_subclass_list,
	get_quality_list,
	get_style_list,
	get_supplier_list,
	get_supplier_style_list,
	get_series_list,
	get_series_style_list,
	get_gift_list,
	get_technology_list,
	get_price_category_list,
	get_gem_category_list,
	get_finance_list,
	get_gem_attribute_list,
	edit_goods,
	goods_detail,
	receipts_purchase_detail
} from '@/api/jewelry/receipts_purchase';
import { forIn } from 'lodash-es';

const useForm = Form.useForm;
const loading = ref(false);
const { currentRoute, push } = useRouter();
const { query } = unref(currentRoute);
console.log('query:', query);

// 是否展开
const searchExpand = ref(false);
//工费零售方式
const retail_labour_options = ref([{ label: '计件', value: '1' }, { label: '计克', value: '2' }]);
//主石信息
const table1 = reactive({
	loading: false,
	tableData: [
		{
			type: 1,
			name: '',
			gem_category_code: '',
			price: '',
			amount: '',
			num: 1,
			weight: '',
			stone_code: '',
			form: '',
			specs: '',
			color: '',
			neatness: '',
			cut: '',
			buffing: '',
			symmetric: '',
			fluorescence: '',
			fluorescence_color: '',
			inlay_fee: '',
			cert_fee: '',
			cert_cate: '',
			cert_code: ''
		}
	]
});
//副石信息
const table2 = reactive({
	loading: false,
	tableData: [
		{
			type: 2,
			name: '',
			gem_category_code: '',
			price: '',
			amount: '',
			num: 1,
			weight: '',
			stone_code: '',
			form: '',
			specs: '',
			color: '',
			neatness: '',
			cut: '',
			buffing: '',
			symmetric: '',
			fluorescence: '',
			fluorescence_color: '',
			inlay_fee: '',
			cert_fee: '',
			cert_cate: '',
			cert_code: ''
		}
	]
});
//配件信息
const table3 = reactive({
	loading: false,
	tableData: [
		{
			fitting_name: '',
			fitting_num: '',
			fitting_weight: '',
			fitting_num_price: '',
			fitting_weight_price: '',
			fitting_cost: ''
		}
	]
});

const form = reactive({
	code: '',
	goods_code: '',
	bar_code: '',
	subclass_code: null,
	name: '',
	quality_code: null,
	style_code: null,
	sub_style: '',
	gold_weight: '',
	piece_weight: '',
	style_model: '',
	hand_inch: '',
	length: '',
	inner_diameter: '',
	size: '',
	main_stone_retail_price: '',
	sticker_price: '',
	retail_labour_expenses: '',
	retail_labour_type: null,
	retail_type: null,
	purchase_gold_price: '',
	purchase_labour_expenses: '',
	purchase_labour_amount: '',
	gold_material_price: '',
	loss: '',
	basic_labour: '',
	special_labour: '',
	other_fee: '',
	cert_fee: '',
	brand_extra_fee: '',
	cost: '',
	retail_cost: '',
	num: 1,
	cert_first_cate: '',
	cert_first_code: '',
	cert_second_cate: '',
	cert_second_code: '',
	management_brand: '',
	brand: '',
	color: '',
	supplier_code: null,
	supplier_bar: '',
	supplier_style_code: null,
	series_code: null,
	series_style_code: null,
	supervision_code: '',
	old_bar_code: '',
	finance: null,
	present_cate: null,
	craft_cate: null,
	price_cate: null,
	gem_category_code: null,
	note_first: '',
	note_second: '',
	thumb: '',
	fitting_name: '',
	fitting_num: '',
	fitting_weight: '',
	fitting_num_price: '',
	fitting_weight_price: '',
	fitting_cost: '',
	gem_item: []
});
/* 计算采购总额 */
form.purchase_labour_amount = computed({
	get(){
		let num = 0;
		num = Number(form.purchase_labour_expenses) + Number(form.purchase_gold_price);
		return num;
	},
	set(value) {
	    console.log("value", value)
		let num = 0;
		num = Number(form.purchase_labour_expenses) + Number(form.purchase_gold_price);
		return num;
	}
});
/* 计算成本 */
form.cost = computed({
	get(){
		let num = 0;
		num =
			Number(form.purchase_labour_expenses) +
			Number(form.purchase_gold_price) +
			Number(form.gold_material_price) +
			Number(form.loss) +
			Number(form.basic_labour) +
			Number(form.special_labour) +
			Number(form.other_fee) +
			Number(form.cert_fee) +
			Number(form.brand_extra_fee);
		return num;
	},
	set(value){
		let num = 0;
		num =
			Number(form.purchase_labour_expenses) +
			Number(form.purchase_gold_price) +
			Number(form.gold_material_price) +
			Number(form.loss) +
			Number(form.basic_labour) +
			Number(form.special_labour) +
			Number(form.other_fee) +
			Number(form.cert_fee) +
			Number(form.brand_extra_fee);
		return num;
	},
});
/* 计算总价 */
const countAmount = row => {
	row.amount = Number(row.num) * Number(row.price);
	return Number(row.num) * Number(row.price);
};

const imageUrl = ref('');
// 头像上传
const images = ref([]);
/* 完全自己控制选择文件后的处理 */
const uploadHandler = info => {
	if (info && info.file && info.file.response) {
		const data = info.file.response.data;
		imageUrl.value = data.path;
		form.thumb = data.id;
	}
};
const goods_category_options = ref([]);
const quality_options = ref([]);
const style_options = ref([]);
const supplier_options = ref([]);
const supplier_style_options = ref([]);
const series_options = ref([]);
const series_style_options = ref([]);
const present_cate_options = ref([]);
const craft_cate_options = ref([]);
const price_cate_options = ref([]);
const gem_category_options = ref([]);
const finance_options = ref([]);

onMounted(() => {
	console.log('query', query);
	form.code = query.code;
	form.goods_code = query.goods_code;
	getDetail();
	get_subclass_list({ page: 1, limit: 9999 }).then(res => {
		res.list.map(item => {
			goods_category_options.value.push({
				value: item.code,
				label: item.name
			});
		});
	});
	get_quality_list({ page: 1, limit: 9999 }).then(res => {
		res.list.map(item => {
			quality_options.value.push({
				value: item.code,
				label: item.name
			});
		});
	});
	get_style_list({ page: 1, limit: 9999 }).then(res => {
		res.list.map(item => {
			style_options.value.push({
				value: item.code,
				label: item.name
			});
		});
	});
	get_supplier_list({ page: 1, limit: 9999 }).then(res => {
		res.list.map(item => {
			supplier_options.value.push({
				value: item.code,
				label: item.name
			});
		});
	});
	get_supplier_style_list({ page: 1, limit: 9999 }).then(res => {
		res.list.map(item => {
			supplier_style_options.value.push({
				value: item.code,
				label: item.name
			});
		});
	});
	get_series_list({ page: 1, limit: 9999 }).then(res => {
		res.list.map(item => {
			series_options.value.push({
				value: item.code,
				label: item.name
			});
		});
	});
	get_series_style_list({ page: 1, limit: 9999 }).then(res => {
		res.list.map(item => {
			series_style_options.value.push({
				value: item.code,
				label: item.name
			});
		});
	});
	get_gift_list({ page: 1, limit: 9999 }).then(res => {
		res.list.map(item => {
			present_cate_options.value.push({
				value: item.code,
				label: item.name
			});
		});
	});
	get_technology_list({ page: 1, limit: 9999 }).then(res => {
		res.list.map(item => {
			craft_cate_options.value.push({
				value: item.code,
				label: item.name
			});
		});
	});
	get_price_category_list({ page: 1, limit: 9999 }).then(res => {
		res.list.map(item => {
			price_cate_options.value.push({
				value: item.code,
				label: item.name
			});
		});
	});
	get_gem_category_list({ page: 1, limit: 9999 }).then(res => {
		res.list.map(item => {
			gem_category_options.value.push({
				value: item.code,
				label: item.name
			});
		});
	});
	get_finance_list({ page: 1, limit: 9999 }).then(res => {
		res.list.map(item => {
			finance_options.value.push({
				value: item.code,
				label: item.name
			});
		});
	});
	getStone('stone');
	getStone('form');
	getStone('color');
	getStone('cut');
	getStone('neatness');
	getStone('symmetric');
	getStone('buffing');
	getStone('fluorescence');
});
const getDetail = ()=>{
	goods_detail({ goods_code: query.goods_code }).then(res => {
		console.log('res', res);
		Object.keys(form).forEach(key => {
			form[key] = res.goods_info ? res.goods_info[key] : '';
		});
		imageUrl.value = res.goods_info.thumb_url;
		table1.tableData = res.goods_info.master_gem;
		table2.tableData = res.goods_info.slave_gem;
		Object.keys(table3.tableData[0]).forEach(key => {
			table3.tableData[0][key] = res.goods_info ? res.goods_info[key] : '';
		});
		console.log('form', form);
	});
}
const stone_options = ref([]);
const form_options = ref([]);
const color_options = ref([]);
const neatness_options = ref([]);
const cut_options = ref([]);
const buffing_options = ref([]);
const symmetric_options = ref([]);
const fluorescence_options = ref([]);
//stone石号,form形状,color颜色,neatness净度,cut切工,symmetric对称,buffing抛光,fluorescence荧光
const getStone = type => {
	get_gem_attribute_list({ page: 1, limit: 9999, type: type }).then(res => {
		res.list.map(item => {
			if (type == 'stone') {
				stone_options.value.push({
					value: item.code,
					label: item.name
				});
			} else if (type == 'form') {
				form_options.value.push({
					value: item.code,
					label: item.name
				});
			} else if (type == 'color') {
				color_options.value.push({
					value: item.code,
					label: item.name
				});
			} else if (type == 'neatness') {
				neatness_options.value.push({
					value: item.code,
					label: item.name
				});
			} else if (type == 'cut') {
				cut_options.value.push({
					value: item.code,
					label: item.name
				});
			} else if (type == 'buffing') {
				buffing_options.value.push({
					value: item.code,
					label: item.name
				});
			} else if (type == 'symmetric') {
				symmetric_options.value.push({
					value: item.code,
					label: item.name
				});
			} else if (type == 'fluorescence') {
				fluorescence_options.value.push({
					value: item.code,
					label: item.name
				});
			}
		});
	});
};
const xTable = ref(null);
const insertEvent = async row => {
	const $table = xTable.value;
	const record = {
		type: 2,
		num: 1,
		specs: ''
	};
	const { row: newRow } = await $table.insertAt(record, row);
	await $table.setEditCell(newRow, 'name');
};
const getInsertEvent = () => {
	const $table = xTable.value;
	const insertRecords = $table.getInsertRecords();
	table2.tableData = table2.tableData.concat(JSON.parse(JSON.stringify(insertRecords)));
};

//根据value寻找label， 用于回显
const productSpec = (list, code) => {
	//console.log('）））', list, code);
	if (list.length > 0) {
		const item = list.find(item => item.value === code);
		return item ? item.label : code;
	}
};

/* 货品种类 */
const goods_category_change = e => {
	console.log('货品种类:', e);
	form.subclass_code = e;
};
/* 货品成色*/
const quality_change = e => {
	console.log('货品成色:', e);
	form.quality_code = e;
};
/* 货品款式*/
const style_change = e => {
	console.log('货品款式:', e);
	form.style_code = e;
};
/* 工费零售方式*/
const retail_labour_change = e => {
	console.log('工费零售方式:', e);
	form.retail_labour_type = e;
};
/* 零售方式*/
const retail_labour_change2 = e => {
	console.log('零售方式:', e);
	form.retail_type = e;
};
/* 供应商名称*/
const supplier_change = e => {
	console.log('供应商名称:', e);
	form.supplier_code = e;
};
/* 供应商款式*/
const supplier_style_change = e => {
	console.log('供应商款式:', e);
	form.supplier_style_code = e;
};
/* 系列名称*/
const series_change = e => {
	console.log('系列名称:', e);
	form.series_code = e;
};
/* 系列款式*/
const series_style_change = e => {
	console.log('系列款式:', e);
	form.series_style_code = e;
};
/* 赠品类型*/
const present_cate_change = e => {
	console.log('赠品类型:', e);
	form.present_cate = e;
};
/* 工艺类型*/
const craft_cate_change = e => {
	console.log('工艺类型:', e);
	form.craft_cate = e;
};
/* 价格类型*/
const price_cate_change = e => {
	console.log('价格类型:', e);
	form.price_cate = e;
};
/* 宝石类别*/
const gem_category_change = e => {
	console.log('宝石类别:', e);
	form.gem_category_code = e;
};
/* 财务分类*/
const finance_change = e => {
	console.log('财务分类:', e);
	form.finance = e;
};

const toggleExpand = () => {
	searchExpand.value = !searchExpand.value;
};

// 表单验证规则
const rules = reactive({
	bar_code: [{ required: true, message: '请输入条形码', trigger: 'blur' }],
	subclass_code: [{ required: true, message: '请选择货品种类', trigger: 'change' }],
	quality_code: [{ required: true, message: '请选择货品成色', trigger: 'change' }],
	style_code: [{ required: true, message: '请选择货品款式', trigger: 'change' }],
	gold_weight: [{ required: true, message: '请输入净金重', trigger: 'blur' }],
	piece_weight: [{ required: true, message: '请输入总件重', trigger: 'blur' }],
	main_stone_retail_price: [{ required: true, message: '请输入主石零售价', trigger: 'blur' }],
	sticker_price: [{ required: true, message: '请输入标签价', trigger: 'blur' }],
	retail_labour_type: [{ required: true, message: '请选择工费零售方式', trigger: 'change' }],
	retail_type: [{ required: true, message: '请选择零售方式', trigger: 'change' }],
	num: [{ required: true, message: '请输入数量', trigger: 'blur' }],
	supplier_code: [{ required: true, message: '请选择供应商', trigger: 'change' }],
	series_code: [{ required: true, message: '请选择系列', trigger: 'change' }],
	series_style_code: [{ required: true, message: '请选择系列款式', trigger: 'change' }]
});

const { validate, validateInfos } = useForm(form, rules);

const save = () => {
	validate()
		.then(async () => {
			await getInsertEvent();
			form.gem_item = [];
			for (let key in table3.tableData[0]) {
				form[key] = table3.tableData[0][key];
			}
			//form.gem_item[0] = table1.tableData[0];
			form.gem_item = form.gem_item.concat(table1.tableData).concat(table2.tableData);
			form.goods_code = query.goods_code;
			form.code = query.code;
			console.log('form', form);
			edit_goods(form)
				.then(res => {
					message.success(res.msg);
				})
				.catch(e => {
					message.error(e);
				});
		})
		.catch(e => {
			console.log(222, e);
		});
};
</script>
